<template>
	<view class="content">
		<view class="card-center">
			<view class="box">
				<view class="text-center">
					<image class="logo" src="../../static/logo.png" mode=""></image>
					<h1>注册</h1>
					<view class="subtitle">创建您的帐户</view>
				</view>
				<view class="from">
					<view class="fromcon">
						<view class="fromitem">
							<view class="icon">
								<image src="../../static/timg/aite.png" mode=""></image>
							</view>
							<input class="input" type="text" placeholder="登陆用户名" v-model="name" />
							<view class="label">登陆用户名</view>
							<view class="right">必须</view>
						</view>
						<view class="fromitem">
							<view class="icon">
								<image src="../../static/timg/xing.png" mode=""></image>
							</view>
							<input class="input" :type="psdtype" placeholder="登陆密码" v-model="psd" />
							<view class="label">登陆密码</view>
							<view class="right-helper">
								<image v-if="psdtype == 'text'" @click="psdtype = 'password'" src="../../static/timg/showpsd.png" mode=""></image>
								<image v-if="psdtype == 'password'" @click="psdtype = 'text'" src="../../static/timg/hidepsd.png" mode=""></image>
							</view>
						</view>
						<view class="fromitem">
							<view class="icon">
								<image src="../../static/timg/xing.png" mode=""></image>
							</view>
							<input class="input" :type="psdtype1" placeholder="确认登陆密码" v-model="comfrimpsd" />
							<view class="label">确认登陆密码</view>
							<view class="right-helper">
								<image v-if="psdtype1 == 'text'" @click="psdtype1 = 'password'" src="../../static/timg/showpsd.png" mode=""></image>
								<image v-if="psdtype1 == 'password'" @click="psdtype1 = 'text'" src="../../static/timg/hidepsd.png" mode=""></image>
							</view>
						</view>
						<view class="fromitem">
							<view class="icon">
								<image src="../../static/timg/zhifupsd.png" mode=""></image>
							</view>
							<input class="input" :type="psdtype2" placeholder="支付密码" v-model="zfpsd" />
							<view class="label">支付密码</view>
							<view class="right-helper">
								<image v-if="psdtype2 == 'text'" @click="psdtype2 = 'password'" src="../../static/timg/showpsd.png" mode=""></image>
								<image v-if="psdtype2 == 'password'" @click="psdtype2 = 'text'" src="../../static/timg/hidepsd.png" mode=""></image>
							</view>
						</view>
						<!-- <view class="fromitem">
							<view class="icon">
								<image src="../../static/timg/zhifupsd.png" mode=""></image>
							</view>
							<input class="input" :type="psdtype3" placeholder="确认支付密码" v-model="comfrimzfpsd" />
							<view class="label">确认支付密码</view>
							<view class="right-helper">
								<image v-if="psdtype3 == 'text'" @click="psdtype3 = 'password'" src="../../static/timg/showpsd.png" mode=""></image>
								<image v-if="psdtype3 == 'password'" @click="psdtype3 = 'text'" src="../../static/timg/hidepsd.png" mode=""></image>
							</view>
						</view> -->
						<view class="fromitem">
							<view class="icon">
								<image src="../../static/timg/yaoqing.png" mode=""></image>
							</view>
							<input class="input" type="text" placeholder="邀请码" v-model="yqm" />
							<view class="label">邀请码</view>
							<view class="right">必须</view>
						</view>
						<view class="fromitem">
							<view class="icon">
								<image src="../../static/timg/yaoqing.png" mode=""></image>
							</view>
							<input class="input" type="text" placeholder="图形验证码" v-model="yzm" />
							<view class="label">图形验证码</view>
							<view class="right-helper1">
								<image @click="getcaptcha()" :src="uniqidurl" mode=""></image>
							</view>
						</view>
						<view>
							<checkbox-group @change="checkboxChange()">
								<label>
									<checkbox class="checkboxs" :checked="forgotpsd" iconColor="#fff" activeBackgroundColor="#007aff" /><text class="checkboxslabel">我阅读并同意 </text><text @click.stop="openpopup()" class="checkboxslabel" style="color: #0d6efd;">条款和条件</text>
								</label>
							</checkbox-group>
						</view>
						<view class="btn" @click="registers()">创建账户</view>
					</view>
					<view class="dflex">
						<view @click="gologin()">登录帐号</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popupview">
				<view class="ptitle">条款和条件</view>
				<view class="pcon">
					条款和条件条款和条件条款和条件
					<br />
					条款和条件条款和条件条款和条件条款和条件条款和条件条款和条件条款和条件条款和条件
					<br />
					条款和条件条款和条件条款和条件条款和条件条款和条件条款和条件条款和条件条款和条件条款和条件
					<br />
					条款和条件条款和条件条款和条件条款和条件条款和条件
					<br />
					条款和条件条款和条件条款和条件条款和条件条款和条件条款和条件条款和条件条款和条件条款和条件条款和条件条款和条件条款和条件条款和条件条款和条件条款和条件条款和条件条款和条件
				</view>
				<view class="pbtn" @click="closepopup()">我知道了</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { register,captcha } from '../../api/api.js'
	export default{
		data(){
			return{
				psdtype:'password',
				psdtype1:'password',
				psdtype2:'password',
				psdtype3:'password',
				forgotpsd:false,
				
				name:'',
				psd:'',
				comfrimpsd:'',
				zfpsd:'',
				comfrimzfpsd:'',
				yqm:'',
				yzm:'',
				
				uniqid:'',
				uniqidurl:''
			}
		},
		onLoad(e) {
			if(e.code){
				this.yqm = e.code
				uni.setStorageSync('code',e.code)
			}
			if(uni.getStorageSync('code')){
				this.yqm = uni.getStorageSync('code')
			}
			this.getcaptcha()
		},
		methods:{
			openpopup(){
				this.$refs.popup.open()
			},
			closepopup(){
				this.$refs.popup.close()
			},
			checkboxChange(e){
				this.forgotpsd = !this.forgotpsd
			},
			getcaptcha(){
				captcha().then(res => {
					if(res.data.status.errorCode == 0){
						this.uniqid = res.data.data.uniqid
						this.uniqidurl = res.data.data.url
					}else{
						uni.showToast({
							title: res.data.status.msg,
							icon:'error',
							duration: 2000
						});
					}
				}).catch(err => {
					console.log(err)
				})
			},
			registers(){
				if(this.name == ''){
					uni.showToast({
						title: '请输入用户名',
						icon:'error',
						duration: 2000
					});
					return false
				}
				if(this.psd == ''){
					uni.showToast({
						title: '请输入密码',
						icon:'error',
						duration: 2000
					});
					return false
				}
				if(this.comfrimpsd != this.psd){
					uni.showToast({
						title: '两次密码不同',
						icon:'error',
						duration: 2000
					});
					return false
				}
				if(this.zfpsd == ''){
					uni.showToast({
						title: '请输入支付密码',
						icon:'error',
						duration: 2000
					});
					return false
				}
				if(this.yzm == ''){
					uni.showToast({
						title: '请输入图形验证码',
						icon:'error',
						duration: 2000
					});
					return false
				}
				if(!this.forgotpsd){
					uni.showToast({
						title: '请同意注册条款和条件',
						icon:'error',
						duration: 2000
					});
					return false
				}
				let datas = {
					name:this.name,
					password:this.psd,
					password_confirmation:this.comfrimpsd,
					qk_pwd:this.zfpsd,
					invite_code:this.yqm,
					captcha:this.yzm,
					uniqid:this.uniqid,
					type:1
				}
				register(datas).then(res => {
					if(res.data.status.errorCode == 0){
						uni.showToast({
							title: res.data.status.msg,
							icon:'success',
							duration: 2000
						});
						// uni.setStorage({
						// 	key:'token',
						// 	data:res.data.data
						// })
						setTimeout(function(){
							uni.reLaunch({
								url:'/pages/login/login'
							})
						},1500)
					}else{
						uni.showToast({
							title: res.data.status.msg,
							icon:'error',
							duration: 2000
						});
					}
				}).catch(err => {
					console.log(err)
				})
			},
			gologin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
		}
	}
</script>

<style scoped>
	*{
		box-sizing: border-box;
	}
	.content{
		width: 100%;
		min-height: 100vh;
		background-color: #f1f1f7;
		position: relative;
	}
	.card-center{
		width: 100%;
		padding: 20rpx 30rpx;
	}
	.box{
		width: 100%;
		border-radius: 30px;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		padding: 10rpx 0;
		box-shadow: rgba(0, 0, 0, 0.03) 0px 40rpx 50rpx -10rpx, rgba(0, 0, 0, 0.02) 0px 20rpx 20rpx -10rpx;
	}
	.text-center{
		position: relative;
		margin: 40rpx;
		text-align: center;
	}
	.logo{
		border-radius: 30rpx;
		width: 190rpx;
		background: transparent;
		padding: 20rpx 10rpx;
		margin: 0 10rpx;
		border: 0;
		height: 162rpx;
	}
	h1{
		font-size: 60rpx;
		font-weight: 700;
		padding-bottom: 10rpx;
		margin-bottom: 10rpx;
		color: #1b1b1b;
		letter-spacing: -0.7px;
	}
	.subtitle{
		margin-bottom: 10rpx;
		color: #747474;
		letter-spacing: -0.2px;
		font-size: 28rpx;
		line-height: 48rpx;
	}
	.from{
		position: relative;
		margin: 40rpx;
	}
	.fromitem{
		position: relative;
		margin-bottom: 40rpx;
	}
	.icon{
		position: absolute;
		width: 80rpx;
		height: 106rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.icon image{
		width: 28rpx;
		height: 28rpx;
	}
	.fromitem .input{
		width: 100%;
		height: 106rpx;
		line-height: 102rpx;
		border: 2rpx solid rgba(0, 0, 0, 0.07);
		padding-left: 80rpx;
		padding-right: 30rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #000;
		outline: 0;
	}
	.label{
		position: absolute;
		top: -10rpx;
		height: 20rpx;
		line-height: 20rpx;
		left: 0;
		font-size: 22rpx;
		text-transform: uppercase;
		font-family: "Nunito", sans-serif;
		font-weight: 700;
		transition: all 250ms ease;
		padding-left: 2px !important;
		padding-right: 5px !important;
		color: #0f1117;
		transform: translateX(80rpx) !important;
		margin-left: -64rpx !important;
	}
	.right{
		position: absolute;
		top: 0px;
		right: 20rpx;
		height: 106rpx;
		line-height: 106rpx;
		pointer-events: none;
		font-size: 20rpx;
		opacity: 0.5;
		color: #747474 !important;
	}
	.right-helper1{
		position: absolute;
		top: 0;
		right: 20rpx;
		width: 160rpx;
		height: 106rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.right-helper1 image{
		width: 160rpx;
		height: 80rpx;
	}
	.right-helper{
		position: absolute;
		top: 0;
		right: 0;
		width: 80rpx;
		height: 106rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.right-helper image{
		width: 28rpx;
		height: 28rpx;
	}
	/deep/ .uni-checkbox-input{
		width: 26rpx;
		height: 26rpx;
	}
	/deep/ .uni-checkbox-input.uni-checkbox-input-checked:before{
		font-size: 28rpx;
	}
	.checkboxslabel{
		font-size: 28rpx;
		color: #747474;
	}
	.btn{
		width: 100%;
		text-align: center;
		margin-bottom: 40rpx;
		margin-top: 60rpx;
		font-weight: 700;
		border-radius: 20rpx;
		font-size: 24rpx;
		padding: 26rpx 40rpx;
		color: #fff;
		border: none;
		background-image: linear-gradient(to bottom, #5D9CEC, #4A89DC);
		background-color: #4A89DC !important;
		box-shadow: 0 10rpx 28rpx 0 rgba(0, 0, 0, 0.1);
		position: relative;
		overflow: visible !important;
		z-index: 10;
	}
	.btn::after{
		transform: scale(0.8) translateY(10rpx) translateZ(0px);
		filter: blur(24rpx);
		content: "";
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		background: inherit;
		z-index: -1;
	}
	.dflex{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.dflex view{
		color: #0f1117 !important;
		font-size: 24rpx;
	}
	.popupview{
		width: 600rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx 40rpx;
	}
	.ptitle{
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 50rpx;
		margin-bottom: 20rpx;
	}
	.pcon{
		width: 100%;
		height: 340rpx;
		font-size: 24rpx;
		line-height: 40rpx;
		overflow-y: scroll;
	}
	.pbtn{
		margin-top: 30rpx;
		width: 100%;
		font-size: 26rpx;
		text-align: center;
		background-image: linear-gradient(to bottom, #5D9CEC, #4A89DC);
		background-color: #4A89DC !important;
		box-shadow: 0 10rpx 28rpx 0 rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
		color: #fff;
		height: 70rpx;
		line-height: 70rpx;
	}
</style>